<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="验证" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="item">
			<text class="title">手机号</text>
			<text class="info">17357706169</text>
		</view>
		<view class="item">
			<text class="title">验证码</text>
			<input class="input" type="number" maxlength="6" placeholder="请输入验证码"/>
			<text class="verificationCode">获取验证码</text>
		</view>
		<button class="verify" @click="verify">确认</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{}
		},
		methods:{
			/**校验验证码是否正确**/
			verify()
			{
				//成功跳转
				this.goSafePassword();
			},
			/**修改安全密码**/
			goSafePassword()
			{
				this.$Router.push({
					path: '/pages/merchant/account/safePassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 100%;
		height: 90rpx;
		display: flex;
		float: left;
		background-color: #fff;
		border-bottom: 1rpx solid #f8f8f8;
		display: flex;
		align-items: center;
		.title{
			width: auto;
			float: left;
			font-size: 28rpx;
			color: #333;
			margin-left: 5%;
			font-weight: bold;
		}
		.info{
			float: right;
			text-align: left;
			font-size: 28rpx;
			padding: 30rpx 0rpx;
			margin-left: 30rpx;
			flex: 1;
			color: #454545;
		}
		.input{
			float: right;
			text-align: left;
			font-size: 28rpx;
			margin-left: 30rpx;
			flex: 1;
			color: #454545;
		}
		.verificationCode{
			width: auto;
			float: right;
			height: 40rpx;
			border:none;
			background-color: #fff;
			border-width: 0rpx;
			margin-right: 5%;
			font-size: 26rpx;
			color: #f9c234;
		}
	}
	.item:nth-child(2){
		margin-top: 20rpx;
	}
	.item:last-child{
		border-bottom-width: 0rpx;
	}
	.verify{
		width: 90%;
		float: left;
		margin-left: 5%;
		margin-top: 30rpx;
		background-color: #f9c234;
		border:0rpx;
		color: #fff;
		border-radius: 15rpx;
	}
</style>